<!--
*@Author: QWP
*@Description: 资产登记编辑
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    @close="dialogClose">
    <a-layout class="f-h-100">
      <u-collapsed-sider>
        <u-tree :tree-data="treeData" 
          title="资产分类"
          v-if="!collapsed">
        </u-tree>
      </u-collapsed-sider>
      <a-layout-content class="s-bg-white"
        style="overflow: auto">
        <u-card title="基本信息">
          <u-form :elements="formEls"
            :model="form"
            :gutter="0"
            ref="formRef">
            <template #fj>
              <a-button type="default" ghost :icon="h(UploadOutlined)" 
                style="color: rgba(51,51,51,0.88);">附加上传</a-button>
            </template>
          </u-form>
        </u-card>
        <u-card title="图片">
          <u-upload-img></u-upload-img>
        </u-card>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { HomeOutlined, FileTextOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { TreeProps } from 'ant-design-vue/es/vc-tree';
import { ColumnProps } from 'ant-design-vue/es/table';
import { fileCols } from '@/common/model/fileCols'
import { years, depts, users } from '@/common/model/base'
const route = useRoute()

const collapsed = ref<boolean>(false)
const treeData: TreeProps['treeData'] = [
  { title: '一级部门', key: '1', 
    children: [
      { title: '二级部门', key: '1-1', },
      { title: '三级部门', key: '1-2', }
    ] 
  },
  { title: '四级部门', key: '2', },
  { title: '五级部门', key: '3', },
] 

const formRef = ref<FormInstance>()
const form = reactive({})
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '120px',
  colon: false
}
const formEls: Array<_IFormEl> = [
  { label: '资产编号', key: 'title', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '资产大类', key: 'swbm', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        { label: '金融资产', value: '1' },
        { label: '房地产资产', value: '2' },
        { label: '实物资产', value: '3' },
        { label: '企业资产', value: '4' },
        { label: '大宗商品', value: '5' },
      ]
    }
  },
  { label: '资产分类名称', key: 'zcflmc', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '资产名称', key: 'zcmc', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '卡片类型', key: 'kplx', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        { label: '固定资产', value: '1' },
        { label: '无形资产', value: '2' },
        { label: '公共基础设施', value: '3' },
        { label: '政府储备物资', value: '4' },
        { label: '文物文化资产', value: '5' },
      ]
    }
  },
  { label: '入账日期', key: 'rzrq', col: { span: 8 }, element: 'datepicker', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '金额(元)', key: 'je', col: { span: 8 }, element: 'money', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '价值类型', key: 'jzlx', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        { label: '市场价值', value: '1' },
        { label: '替代成本价值（重置成本价值）', value: '2' },
        { label: '收益价值', value: '3' },
        { label: '成本价值', value: '4' },
        { label: '净价值', value: '5' },
        { label: '折旧价值', value: '6' },
        { label: '投资价值', value: '7' },
        { label: '残余价值', value: '8' },
        { label: '在用价值', value: '9' },
        { label: '清算价值', value: '10' },
      ]
    }
  },
  { label: '价值(元)', key: 'jz', col: { span: 8 }, element: 'money', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '使用状态', key: 'syzt', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        { label: '再用', value: '1' },
        { label: '未使用', value: '2' },
        { label: '不需要', value: '3' },
      ]
    }
  },
  { label: '使用方向', key: 'syfx', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        { label: '直接生产', value: '1' },
        { label: '辅助生产', value: '2' },
        { label: '对外投资', value: '3' },
        { label: '内部投资', value: '4' },
        { label: '资产担保', value: '5' },
        { label: '资产抵押', value: '6' },
        { label: '报废与处置', value: '7' },
      ]
    }
  },
  { label: '使用年限', key: 'synx', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: { options: years() } 
  },
  { label: '使用地点', key: 'sydd', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        {label: '户外', value: '1'},
        {label: '室内', value: '2'},
      ]
    } 
  },
  { label: '取得方式', key: 'qdfs', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: {
      options: [
        { label: '购买', value: '1' },
        { label: '自行加工或自行建造', value: '2' },
        { label: '捐赠', value: '3' },
        { label: '无偿调入', value: '4' },
        { label: '置换换入', value: '5' },
      ]
    }
  },
  { label: '取得日期', key: 'qdrq', col: { span: 8 }, element: 'datepicker', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '使用部门', key: 'sybm', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: { options: depts } 
  },
  { label: '使用人', key: 'syr', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps },
    componentProps: { options: users }  
  },
  { label: '标签状态', key: 'bqzt', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: { 
      options: [
        { label: '正常使用', value: '1'},
        { label: '待维修', value: '2'},
        { label: '闲置', value: '3'},
        { label: '报废', value: '4'},
        { label: '其他', value: '5'},
      ] 
    }  
  },
  { label: '管理部门', key: 'glbm', col: { span: 8 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true },
    componentProps: { options: depts }  
  },
  { label: '生产厂家', key: 'sccj', col: { span: 8 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '说明', key: 'sm', col: { span: 24 }, element: 'textarea', 
    formItemProps: { ...formItemProps } 
  },
]

const tabData: Array<any> = reactive([]); 
const columns: Array<ColumnProps> = fileCols(); 


// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
.u-doc-iconme-form {
  &>.ant-row {
    $borderColor: #EA0000;
    border-bottom: 1px solid $borderColor ;
    border-right: 1px solid $borderColor ;
    .ant-form-item {
      margin-bottom: 0;
      .ant-form-item-row {
        .ant-col {
          border: 1px solid $borderColor;
          border-bottom: unset;
          border-right: unset;
          border-collapse: collapse;
          background: rgba(234,0,0,0.05);
        }
        .ant-form-item-label {
          label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #EA0000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      .ant-input-suffix {
        color: #AAAAAA
      }
    }
    .u-view-text {
      .ant-form-item-row {
        height: 60px;
        .ant-form-item-label {
          line-height: 60px;
        }
        .ant-form-item-control {
          justify-content: center;
        }
      }
    }
  }
}
</style>